<!--suppress ALL -->
<template>
  <div class="root">
    <div id="uiContainer">
      <div class="sysTitle">
        <span class="sysTitle">运转中心</span>
      </div>
    </div>
    <div id="dataContainer"></div>
    <modal name="hello-world" :adaptive="true" width="60%" height="65%">
      <div class="dialogBg">
        <div class="dialogTitle">
          <div class="dialogTitleText">-{{ dialogTitle }}-</div>
          <div class="dialogSubTitleText">（共计{{ dialogItemCount }}个）</div>
        </div>
        <div class="colseDiv" v-on:click="hide"></div>
        <div class="dialogItemContainer">
          <div v-for="item in depts" :key="item" class="dialogItem">
            <div class="itemCount">{{ item.dataCount }}</div>
            <div class="itemSize">{{ item.dataSize }}</div>
            <div class="itemName">-{{ item.nodeName }}-</div>
          </div>
        </div>
      </div>
    </modal>
  </div>
</template>
<script>
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import THREE from "../three-css2drender/CSS2DRenderer.js";
import { CSS3DRenderer, CSS3DObject } from "three-css3drenderer";
import TWEEN from "@tweenjs/tween.js";
import api from "../../http/api";
const { CSS2DRenderer, CSS2DObject } = THREE;
export default {
  name: "threeMap",
  data() {
    return {
      scene: "",
      labelRenderer: "",
      biaozhudiv: null,
      light: "",
      camera: "",
      mouse: null,
      userMouse: null,
      raycaster: null,
      spriteMoreGroup: [],
      controls: "",
      renderer: "",
      geometry: "",
      material: "",
      dialogTitle: "部门",
      dialogItemCount: 0,
      depts: [],
      fov: 60,
      img: "",
      biaozhuLabel: "",
      lineStyle: {
        color: 0xcc0000,
        linewidth: 2,
      },
      arrowSprite: null,
      arrowSpriteRight: null,
      oneLevelLeftCenter: null,
      oneLevelRightCenter: null,
      threeLevelMax: 5, // 第三级别最多放多放个设置
      oneLevelPos: {
        x: 3,
        y: 3,
        z: 1,
      },
      twoLevelPos: [
        {
          x: -17.5,
          y: -21,
          z: 1,
        },
        {
          x: -33,
          y: -12,
          z: 1,
        },
        {
          x: 18,
          y: 18,
          z: 1,
        },
        {
          x: 34,
          y: 9,
          z: 1,
        },
      ],
      twoLevelTextOffset: [
        {
          x: 7,
          y: 0,
          z: 0,
        },
        {
          x: 11.5,
          y: -6,
          z: 0,
        },
        {
          x: -16.5,
          y: -5.5,
          z: 0,
        },
        {
          x: -21,
          y: 0,
          z: 0,
        },
      ],
      // 第三级对象偏移量
      threeLevelOffset: [
        {
          x: 18,
          y: -10.5,
          gapX: 5.5,
          gapY: 3.2,
        },
        {
          x: -16,
          y: 8,
          gapX: 5.5,
          gapY: 3.2,
        },
        {
          x: -15,
          y: 7.3,
          gapX: -5.5,
          gapY: -3.2,
        },
        {
          x: 17,
          y: -11,
          gapX: -5.5,
          gapY: -3.2,
        },
      ],
      twoLevelLeftCenter: {
        x: -25,
        y: -19.5,
        z: 1,
      },
      twoLevelRightCenter: {
        x: 26.5,
        y: 10,
        z: 1,
      },
      threeLevelConnect: [],
      transData: [
        {
          nodeName: "部门",
          dataCount: "100个",
          dataSize: "10G",
          chindNode: [
            {
              nodeName: "部门1",
              dataCount: "120个",
              dataSize: "11G",
            },
            {
              nodeName: "部门2",
              dataCount: "120个",
              dataSize: "12G",
            },
            {
              nodeName: "部门3",
              dataCount: "130个",
              dataSize: "13G",
            },
            {
              nodeName: "部门1",
              dataCount: "120个",
              dataSize: "11G",
            },
            {
              nodeName: "部门2",
              dataCount: "120个",
              dataSize: "12G",
            },
            {
              nodeName: "部门3",
              dataCount: "130个",
              dataSize: "13G",
            },
          ],
        },
        {
          nodeName: "处室",
          dataCount: "100个",
          dataSize: "10G",
          chindNode: [
            {
              nodeName: "处室1",
              dataCount: "120个",
              dataSize: "11G",
            },
            {
              nodeName: "处室2",
              dataCount: "120个",
              dataSize: "12G",
            },
            {
              nodeName: "处室3",
              dataCount: "130个",
              dataSize: "13G",
            },
            {
              nodeName: "处室2",
              dataCount: "120个",
              dataSize: "12G",
            },
            {
              nodeName: "处室3",
              dataCount: "130个",
              dataSize: "13G",
            },
          ],
        },
        {
          nodeName: "机构",
          dataCount: "100个",
          dataSize: "10G",
          chindNode: [
            {
              nodeName: "机构1",
              dataCount: "120个",
              dataSize: "11G",
            },
            {
              nodeName: "机构2",
              dataCount: "120个",
              dataSize: "12G",
            },
            {
              nodeName: "机构3",
              dataCount: "130个",
              dataSize: "13G",
            },
            {
              nodeName: "机构3",
              dataCount: "130个",
              dataSize: "13G",
            },
            {
              nodeName: "机构3",
              dataCount: "130个",
              dataSize: "13G",
            },
          ],
        },
        {
          nodeName: "项目",
          dataCount: "100个",
          dataSize: "10G",
          chindNode: [
            {
              nodeName: "项目1",
              dataCount: "120个",
              dataSize: "11G",
            },
            {
              nodeName: "项目2",
              dataCount: "120个",
              dataSize: "12G",
            },
            {
              nodeName: "项目3",
              dataCount: "130个",
              dataSize: "13G",
            },
          ],
        },
      ],
    };
  },
  created() {},
  mounted() {
    console.info("mounted -----");
    // 初始化加载相机灯光等
    this.init();
    // 渲染动画
    this.animate();
    // 添加台面
    this.addPlatform();
    // 一级文件中心
    this.addOneLevelObj();

    // 请求数据
    //  api.getTransData({}, res => {
    //      console.info("res.code = " + res.code);
    //      if(res.code === 200){
    //         this.transData = res.data;
    this.loadDataView();
    //      }else{
    //        console.info("未请求到数据");
    //      }
    //  })
  },
  destroyed() {
    console.log("实例已经被销毁");
  },
  methods: {
    init() {
      this.mouse = new THREE.Vector2();
      this.userMouse = new THREE.Vector2();
      this.scene = new THREE.Scene();
      this.scene.add(new THREE.AmbientLight(0x999999)); //环境光
      //初始化相机
      this.camera = new THREE.PerspectiveCamera(
        this.fov,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      this.camera.position.set(0, 0, 65);
      //渲染
      this.renderer = new THREE.WebGLRenderer({ alpha: true }); //会在body里面生成一个canvas标签,
      this.renderer.setPixelRatio(window.devicePixelRatio); //为了兼容高清屏幕
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      const container = document.getElementById("dataContainer");
      container.appendChild(this.renderer.domElement);

      this.scene.add(this.camera);

      //标注渲染
      this.labelRenderer = new CSS2DRenderer();
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
      this.labelRenderer.domElement.style.position = "absolute";
      this.labelRenderer.domElement.style.top = 0;
      container.appendChild(this.labelRenderer.domElement);

      window.addEventListener("resize", this.onWindowResize, false); //添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）

      this.raycaster = new THREE.Raycaster(); //射线
      document.addEventListener("mouseup", this.onMouseDown, false); //鼠标点击事件
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.labelRenderer.setSize(window.innerWidth, window.innerHeight);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
      TWEEN.update();
    },
    render() {
      this.renderer.render(this.scene, this.camera);
      this.labelRenderer.render(this.scene, this.camera);
      this.raycastSprites();
    },
    // 添加底座平台
    addPlatform() {
      this.addSprite(
        "../../../static/image/transImg/platformBg.png",
        new THREE.Vector3(0, -6, 1),
        new THREE.Vector3(94, 61, 1)
      );
    },
    // 添加一级文件中心
    addOneLevelObj() {
      this.addSprite(
        "../../../static/image/transImg/oneLevelIcon.png",
        new THREE.Vector3(
          this.oneLevelPos.x,
          this.oneLevelPos.y,
          this.oneLevelPos.z
        ),
        new THREE.Vector3(24, 27, 1)
      );
    },
    // 根据数据加载视图
    loadDataView() {
      // 根据数据初始化二级对象
      this.addTwoLevelObj();
      // 根据数据初始化三级对象
      this.addThreeLevelObj();
      // 绘制二级与三级对象连线
      this.drawTwoAndThreeLevelLine();
      // 绘制二级与一级间连线和点
      this.drawOneAndTwoLevelLine();
      // 绘制二级与二级中心点间连线
      this.drawTwoLevelLine();
      // 绘制数据流箭头动画
      this.dataStreamAnim();
    },
    // 添加二级对象
    addTwoLevelObj() {
      var self = this;
      var twoLevelTexture = new THREE.TextureLoader().load(
        "../../../static/image/transImg/twoLevelIcon.png"
      );
      var material = new THREE.SpriteMaterial({
        map: twoLevelTexture,
        fog: true,
      });
      this.transData.forEach(function (nodeData, index) {
        if (index < self.twoLevelPos.length) {
          console.log(index + "   " + nodeData);
          var sprite = self.addSpriteByMaterial(
            material,
            new THREE.Vector3(
              self.twoLevelPos[index].x,
              self.twoLevelPos[index].y,
              self.twoLevelPos[index].z
            ),
            new THREE.Vector3(18, 16, 10)
          );

          var titleXOffset = 0;
          var titleYOffset = 0;
          var countXOffset = 0;
          var countYOffset = 0;
          var sizeXOffset = 0;
          var sizeYOffset = 0;
          switch (index) {
            case 0:
              titleXOffset = 0.45;
              titleYOffset = 0.5;
              countXOffset = 0.45;
              countYOffset = 0.35;
              sizeXOffset = 0.45;
              sizeYOffset = 0.25;
              break;
            case 1:
              titleXOffset = 0.6;
              titleYOffset = 0.4;
              countXOffset = 0.6;
              countYOffset = 0.25;
              sizeXOffset = 0.6;
              sizeYOffset = 0.15;
              break;
            case 2:
              titleXOffset = 0.15;
              titleYOffset = 0.2;
              countXOffset = 0.15;
              countYOffset = 0.05;
              sizeXOffset = 0.15;
              sizeYOffset = -0.05;
              break;
            case 3:
              titleXOffset = 0;
              titleYOffset = 0.3;
              countXOffset = 0;
              countYOffset = 0.15;
              sizeXOffset = 0;
              sizeYOffset = 0.05;
              break;
          }

          // 添加二级标识
          self.addText(
            new THREE.Vector3(titleXOffset, titleYOffset, 1),
            nodeData.nodeName,
            sprite,
            18,
            "rgb(255,255,255)",
            function () {}
          );
          // 添加二级数据量
          self.addText(
            new THREE.Vector3(countXOffset, countYOffset, 1),
            "文件数：" + nodeData.dataCount,
            sprite,
            12,
            "rgb(0, 197, 205)",
            function () {}
          );
          // 添加二级数据容量
          self.addText(
            new THREE.Vector3(sizeXOffset, sizeYOffset, 1),
            "数据容量：" + nodeData.dataSize,
            sprite,
            12,
            "rgb(255, 222, 173)",
            function () {}
          );
          self.scene.add(sprite);
        }
      });
    },
    addThreeLevelObj() {
      var self = this;
      self.threeLevelConnect = [];
      self.spriteMoreGroup = [];
      var texture = new THREE.TextureLoader().load(
        "../../../static/image/transImg/threeLevelIcon.png"
      );
      var material = new THREE.SpriteMaterial({
        map: texture,
        fog: true,
      });
      var moreTexture = new THREE.TextureLoader().load(
        "../../../static/image/transImg/more.png"
      );
      var moreMaterial = new THREE.SpriteMaterial({
        map: moreTexture,
        fog: true,
      });
      var lineMaterial = new THREE.LineBasicMaterial({
        opacity: 1.0, //设置透明度
        linewidth: 1, //设置线的宽度
        color: 0x3cb371,
      });
      self.transData.forEach(function (nodeData, index) {
        var childNode = nodeData.chindNode;
        var twoLevelPos = self.twoLevelPos[index];

        childNode.some(function (nodeData, childIndex) {
          var position = new THREE.Vector3(
            self.twoLevelPos[index].x +
              self.threeLevelOffset[index].x +
              self.threeLevelOffset[index].gapX * childIndex,
            self.twoLevelPos[index].y +
              self.threeLevelOffset[index].y +
              self.threeLevelOffset[index].gapY * childIndex,
            self.twoLevelPos[index].z
          );
          var scaleVector = new THREE.Vector3(8, 8, 1);

          // ----- 绘制横线 -------
          // y偏移值
          // x偏移值
          var lineXOffset = 0;
          var lineYOffset = 0;
          var borderXOffset = 0;
          var borderYOffset = 0;
          var textXOffset = 0;
          // 计算
          switch (index) {
            case 0:
              lineXOffset = -5.6;
              lineYOffset = 1.4;
              borderXOffset = -1.6;
              borderYOffset = -0.8;
              textXOffset = 0.4;
              break;
            case 1:
              lineXOffset = 5;
              lineYOffset = -4.8;
              borderXOffset = 1.5;
              borderYOffset = -3;
              textXOffset = 0.5;
              break;
            case 2:
              lineXOffset = 5;
              lineYOffset = -4.8;
              borderXOffset = 1.5;
              borderYOffset = -3;
              textXOffset = 0.5;
              break;
            case 3:
              lineXOffset = -5.5;
              lineYOffset = 1.2;
              borderXOffset = -1.6;
              borderYOffset = -0.8;
              textXOffset = 0.4;
              break;
          }

          var curVertice = new THREE.Vector3(
            position.x + lineXOffset,
            position.y + lineYOffset,
            position.z
          );
          if (childIndex > 0) {
            var geometry = new THREE.Geometry();
            geometry.vertices.push(
              new THREE.Vector3(
                position.x - self.threeLevelOffset[index].gapX + lineXOffset,
                position.y - self.threeLevelOffset[index].gapY + lineYOffset,
                position.z
              )
            );
            geometry.vertices.push(curVertice);
            var line = new THREE.Line(geometry, lineMaterial);
            self.scene.add(line);
          }

          // 绘制连接点
          var geometry3 = new THREE.CircleGeometry(0.3, 32);
          var material3 = new THREE.MeshBasicMaterial({ color: 0x3cb371 });
          var circle = new THREE.Mesh(geometry3, material3);
          circle.position.set(curVertice.x, curVertice.y, curVertice.z);
          self.scene.add(circle);

          // 存储每组第一个连接点threeLevelConnect数组
          if (childIndex === 0) {
            self.threeLevelConnect.push(curVertice);
          }

          // 绘制竖线
          var verticalGeometry = new THREE.Geometry();
          verticalGeometry.vertices.push(
            new THREE.Vector3(
              position.x + borderXOffset,
              position.y + borderYOffset,
              position.z
            )
          );
          verticalGeometry.vertices.push(curVertice);
          var verticalLine = new THREE.Line(verticalGeometry, lineMaterial);
          self.scene.add(verticalLine);

          // 如果多余设计的最大限制则使用more
          if (childIndex === self.threeLevelMax - 1) {
            if (childNode.length > self.threeLevelMax) {
              var sprite = self.addSpriteByMaterial(
                moreMaterial,
                position,
                scaleVector
              );
              // 添加三级标识
              self.addText(
                new THREE.Vector3(0, 0.5, 1),
                "更多",
                sprite,
                15,
                "rgb(255,255,255)",
                function () {}
              );
              self.spriteMoreGroup.push(sprite);
              sprite.name = "more_" + index;
              self.scene.add(sprite);
            } else {
              var sprite = self.addSpriteByMaterial(
                material,
                position,
                scaleVector
              );
              // 添加三级标识
              self.addText(
                new THREE.Vector3(0, 0.5, 1),
                nodeData.nodeName,
                sprite,
                15,
                "rgb(255,255,255)",
                function () {}
              );
              // 添加三级数据量
              self.addText(
                new THREE.Vector3(textXOffset, -0.05, 1),
                nodeData.dataCount,
                sprite,
                12,
                "rgb(0, 197, 205)",
                function () {}
              );
              // // 添加三级数据容量
              self.addText(
                new THREE.Vector3(textXOffset, -0.25, 1),
                nodeData.dataSize,
                sprite,
                12,
                "rgb(255, 222, 173)",
                function () {}
              );
              self.scene.add(sprite);
            }
            // 大于等于设定最大值则不用再循环了
            return true;
          }

          var sprite = self.addSpriteByMaterial(
            material,
            position,
            scaleVector
          );
          // 添加三级标识
          self.addText(
            new THREE.Vector3(0, 0.5, 1),
            nodeData.nodeName,
            sprite,
            15,
            "rgb(255,255,255)",
            function () {}
          );
          // 添加三级数据量
          self.addText(
            new THREE.Vector3(textXOffset, -0.05, 1),
            nodeData.dataCount,
            sprite,
            12,
            "rgb(0, 197, 205)",
            function () {}
          );
          // // 添加三级数据容量
          self.addText(
            new THREE.Vector3(textXOffset, -0.25, 1),
            nodeData.dataSize,
            sprite,
            12,
            "rgb(255, 222, 173)",
            function () {}
          );
          self.scene.add(sprite);
        });
      });
    },
    drawTwoAndThreeLevelLine() {
      var self = this;
      var lineMaterial = new THREE.LineBasicMaterial({
        opacity: 1.0, //设置透明度
        linewidth: 1, //设置线的宽度
        color: 0x3cb371,
      });

      this.threeLevelConnect.forEach(function (threeLevelPoint, index) {
        var verticalGeometry = new THREE.Geometry();
        verticalGeometry.vertices.push(
          new THREE.Vector3(
            threeLevelPoint.x,
            threeLevelPoint.y,
            threeLevelPoint.z
          )
        );
        var xOffset = 0;
        var yOffset = 0;
        // 计算
        switch (index) {
          case 0:
            xOffset = 4.7;
            yOffset = -5.5;
            break;
          case 1:
            xOffset = -3.8;
            yOffset = -0.8;
            break;
          case 2:
            xOffset = -3;
            yOffset = -1.1;
            break;
          case 3:
            xOffset = 4.4;
            yOffset = -5.7;
            break;
        }
        verticalGeometry.vertices.push(
          new THREE.Vector3(
            self.twoLevelPos[index].x + xOffset,
            self.twoLevelPos[index].y + yOffset,
            self.twoLevelPos[index].z
          )
        );
        var verticalLine = new THREE.Line(verticalGeometry, lineMaterial);
        self.scene.add(verticalLine);
      });
    },
    drawOneAndTwoLevelLine() {
      var texture = new THREE.TextureLoader().load(
        "../../../static/image/trans/point.png"
      );
      var material = new THREE.SpriteMaterial({
        map: texture,
        fog: true,
      });

      var lineMaterial = new THREE.LineBasicMaterial({
        opacity: 1.0, //设置透明度
        linewidth: 1, //设置线的宽度
        color: 0x3cb371,
      });

      this.oneLevelLeftCenter = new THREE.Vector3(
        this.oneLevelPos.x - 6,
        this.oneLevelPos.y - 10,
        this.oneLevelPos.z
      );
      this.oneLevelRightCenter = new THREE.Vector3(
        this.oneLevelPos.x + 6.5,
        this.oneLevelPos.y - 3,
        this.oneLevelPos.z
      );
      var scaleVector = new THREE.Vector3(1.5, 1.5, 1);
      if (this.transData.length > 0) {
        // 一级左边中心点
        var oneLevelLeftCenterPoint = this.addSpriteByMaterial(
          material,
          this.oneLevelLeftCenter,
          scaleVector
        );
        this.scene.add(oneLevelLeftCenterPoint);
        // 二级左边中心点
        var twoLevelLeftCenter = new THREE.Vector3(
          this.twoLevelLeftCenter.x,
          this.twoLevelLeftCenter.y,
          this.twoLevelLeftCenter.z
        );
        var twoLevelLeftCenterPoint = this.addSpriteByMaterial(
          material,
          twoLevelLeftCenter,
          scaleVector
        );
        this.scene.add(twoLevelLeftCenterPoint);
        // 左边一级与二级连线
        var lineGeometry = new THREE.Geometry();
        lineGeometry.vertices.push(this.oneLevelLeftCenter);
        lineGeometry.vertices.push(twoLevelLeftCenter);
        var verticalLine = new THREE.Line(lineGeometry, lineMaterial);
        this.scene.add(verticalLine);
      }
      if (this.transData.length > 2) {
        // 一级右边中心点
        var oneLevelRightCenterPoint = this.addSpriteByMaterial(
          material,
          this.oneLevelRightCenter,
          scaleVector
        );
        this.scene.add(oneLevelRightCenterPoint);
        // 二级右边中心点
        var twoLevelRightCenter = new THREE.Vector3(
          this.twoLevelRightCenter.x,
          this.twoLevelRightCenter.y,
          this.twoLevelRightCenter.z
        );
        var twoLevelRightCenterPoint = this.addSpriteByMaterial(
          material,
          twoLevelRightCenter,
          scaleVector
        );
        this.scene.add(twoLevelRightCenterPoint);
        // 右边一级与二级连线
        var lineGeometry = new THREE.Geometry();
        lineGeometry.vertices.push(this.oneLevelRightCenter);
        lineGeometry.vertices.push(twoLevelRightCenter);
        var verticalLine = new THREE.Line(lineGeometry, lineMaterial);
        this.scene.add(verticalLine);
      }
    },
    drawTwoLevelLine() {
      var self = this;
      var lineMaterial = new THREE.LineBasicMaterial({
        opacity: 1.0, //设置透明度
        linewidth: 1, //设置线的宽度
        color: 0x3cb371,
      });
      var twoLevelCenter = new THREE.Vector3(1, 1, 1);
      self.transData.forEach(function (data, index) {
        var xOffset = 0;
        var yOffset = 0;
        // 计算
        switch (index) {
          case 0:
            xOffset = -3.5;
            yOffset = -0.9;
            twoLevelCenter = new THREE.Vector3(
              self.twoLevelLeftCenter.x,
              self.twoLevelLeftCenter.y,
              self.twoLevelLeftCenter.z
            );
            break;
          case 1:
            xOffset = 4.5;
            yOffset = -5.5;
            twoLevelCenter = new THREE.Vector3(
              self.twoLevelLeftCenter.x,
              self.twoLevelLeftCenter.y,
              self.twoLevelLeftCenter.z
            );
            break;
          case 2:
            xOffset = 4.0;
            yOffset = -5.4;
            twoLevelCenter = new THREE.Vector3(
              self.twoLevelRightCenter.x,
              self.twoLevelRightCenter.y,
              self.twoLevelRightCenter.z
            );
            break;
          case 3:
            xOffset = -3.5;
            yOffset = -1.3;
            twoLevelCenter = new THREE.Vector3(
              self.twoLevelRightCenter.x,
              self.twoLevelRightCenter.y,
              self.twoLevelRightCenter.z
            );
            break;
        }
        var lineGeometry = new THREE.Geometry();
        lineGeometry.vertices.push(twoLevelCenter);
        lineGeometry.vertices.push(
          new THREE.Vector3(
            self.twoLevelPos[index].x + xOffset,
            self.twoLevelPos[index].y + yOffset,
            self.twoLevelPos[index].z
          )
        );
        var verticalLine = new THREE.Line(lineGeometry, lineMaterial);
        self.scene.add(verticalLine);
      });
    },
    dataStreamAnim() {
      var self = this;
      // 绘制箭头

      if (this.transData.length > 0) {
        // 添加左边动画
        self.arrowSprite = self.addSprite(
          "../../../static/image/trans/arrow3.png",
          new THREE.Vector3(
            self.twoLevelLeftCenter.x,
            self.twoLevelLeftCenter.y,
            self.twoLevelLeftCenter.z
          ),
          new THREE.Vector3(3, 1.5, 1)
        );
        self.scene.add(self.arrowSprite);
        const coords = {
          x: self.twoLevelLeftCenter.x,
          y: self.twoLevelLeftCenter.y,
        };
        const tween = new TWEEN.Tween(coords)
          .to(
            { x: self.oneLevelLeftCenter.x, y: self.oneLevelLeftCenter.y },
            4000
          )
          .easing(TWEEN.Easing.Linear.None)
          .onUpdate(() => {
            self.arrowSprite.position.x = coords.x;
            self.arrowSprite.position.y = coords.y;
          })
          .start();
        tween.repeat(Infinity); // repeats forever
      }
      if (this.transData.length > 2) {
        // 添加右边动画
        // 添加左边动画
        self.arrowSpriteRight = self.addSprite(
          "../../../static/image/trans/arrow4.png",
          new THREE.Vector3(
            self.twoLevelRightCenter.x,
            self.twoLevelRightCenter.y,
            self.twoLevelRightCenter.z
          ),
          new THREE.Vector3(3, 1.5, 1)
        );
        self.scene.add(self.arrowSpriteRight);
        const coords = {
          x: self.twoLevelRightCenter.x,
          y: self.twoLevelRightCenter.y,
        };
        const tween = new TWEEN.Tween(coords)
          .to(
            { x: self.oneLevelRightCenter.x, y: self.oneLevelRightCenter.y },
            4000
          )
          .easing(TWEEN.Easing.Linear.None)
          .onUpdate(() => {
            self.arrowSpriteRight.position.x = coords.x;
            self.arrowSpriteRight.position.y = coords.y;
          })
          .start();
        tween.repeat(Infinity); // repeats forever
      }
    },

    draw3DFont() {
      var self = this;
      var loader = new THREE.FontLoader();
      loader.load(
        "../../../static/fonts/gentilis_bold.typeface.json",
        function (font) {
          var textGeometry = new THREE.TextGeometry("1111!", {
            font: font,
            size: 4,
            height: 4,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 10,
            bevelSize: 8,
            bevelOffset: 0,
            bevelSegments: 5,
          });

          var textMaterial = new THREE.MeshPhongMaterial({
            color: 0xff0000,
            specular: 0xffffff,
          });

          var mesh = new THREE.Mesh(textGeometry, textMaterial);
          // mesh.rotateZ = (Math.PI/4);
          mesh.position.set(0, 0, 1);

          self.scene.add(mesh);
        }
      );
    },

    // 添加Sprite通用方法
    addSprite(imgPath, posVector, scaleVector) {
      var spriteMap = new THREE.TextureLoader().load(imgPath);
      var spriteMaterial = new THREE.SpriteMaterial({
        map: spriteMap,
        fog: true,
      });
      var sprite = new THREE.Sprite(spriteMaterial);
      /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
      sprite.position.set(posVector.x, posVector.y, posVector.z);
      sprite.scale.set(scaleVector.x, scaleVector.y, scaleVector.z);

      this.scene.add(sprite);
      return sprite;
    },
    // 添加Sprite通用方法
    addSpriteByMaterial(material, posVector, scaleVector) {
      var sprite = new THREE.Sprite(material);
      /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
      sprite.position.set(posVector.x, posVector.y, posVector.z);
      sprite.scale.set(scaleVector.x, scaleVector.y, scaleVector.z);
      return sprite;
    },
    //
    addText(textOffsetVector, text, mash, size, colorRgb, callback) {
      //添加div标签
      this.biaozhudiv = document.createElement("div");
      // this.biaozhudiv.className = 'lable';
      //两者的执行顺序
      this.biaozhudiv.textContent = text;
      //标注的样式
      // this.biaozhudiv.id = 'biaozhu';
      this.biaozhudiv.style.color = colorRgb;
      this.biaozhudiv.style.fontSize = size + "px";
      this.biaozhudiv.style.fontWeight = "bold";
      this.biaozhudiv.style.fontFamily = "Microsoft YaHei";
      this.biaozhudiv.style.cursor = "pointer";
      this.biaozhudiv.style.textAlign = "left";

      this.biaozhudiv.onclick = function () {
        callback(mash);
      };
      this.biaozhuLabel = new CSS2DObject(this.biaozhudiv);
      this.biaozhuLabel.position.set(
        textOffsetVector.x,
        textOffsetVector.y,
        textOffsetVector.z
      );
      this.biaozhuLabel.rotation.y = 1;
      this.biaozhuLabel.rotation.z = -0.9;
      this.biaozhuLabel.width = "300px";
      mash.add(this.biaozhuLabel);
    },
    addSideImg() {
      var spriteMap = new THREE.TextureLoader().load(
        "../../../static/image/trans/sys-rect.png"
      );
      var startTopX = -31;
      var gap = 7;
      var topDeptCount = 7;
      var bottomDeptCount = 7;
      // 绘制连线
      var lineMaterial = new THREE.LineBasicMaterial({
        opacity: 1.0, //设置透明度
        linewidth: 1, //设置线的宽度
        color: 0x3cb371,
      });

      var topFirstPoint;
      var bottomFirstPoint;

      for (var i = 0; i < topDeptCount; i++) {
        var spriteMaterial = new THREE.SpriteMaterial({
          map: spriteMap,
          fog: true,
        });
        var sprite = new THREE.Sprite(spriteMaterial);
        /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
        sprite.position.set(startTopX + i * gap, 22, 1);
        sprite.scale.set(9, 5, 1);
        this.scene.add(sprite);

        // 绘制横线
        var curVertice = new THREE.Vector3(startTopX + gap * i + 3, 17, 1);
        if (i > 0) {
          var geometry = new THREE.Geometry();
          geometry.vertices.push(
            new THREE.Vector3(curVertice.x - gap, curVertice.y, curVertice.z)
          );
          geometry.vertices.push(curVertice);
          var line = new THREE.Line(geometry, lineMaterial);
          this.scene.add(line);
        }

        // 绘制竖线
        var geometry2 = new THREE.Geometry();
        geometry2.vertices.push(
          new THREE.Vector3(
            sprite.position.x + 1.4,
            sprite.position.y - 2.4,
            sprite.position.z
          )
        );
        geometry2.vertices.push(curVertice);
        var line2 = new THREE.Line(geometry2, lineMaterial);
        this.scene.add(line2);

        // 绘制连接点
        var geometry3 = new THREE.CircleGeometry(0.3, 32);
        var material3 = new THREE.MeshBasicMaterial({ color: 0x3cb371 });
        var circle = new THREE.Mesh(geometry3, material3);
        circle.position.set(curVertice.x, curVertice.y, curVertice.z);
        this.scene.add(circle);

        if (i === 0) {
          topFirstPoint = circle.position;
        }
      }

      var startBottomX = -6;
      for (var i = 0; i < bottomDeptCount; i++) {
        var spriteMaterial = new THREE.SpriteMaterial({
          map: spriteMap,
          fog: true,
        });
        var sprite = new THREE.Sprite(spriteMaterial);
        /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
        sprite.position.set(startBottomX + i * 7, -22, 1);
        sprite.scale.set(9, 5, 1);
        this.scene.add(sprite);

        // 绘制横线
        var curVertice = new THREE.Vector3(
          startBottomX + gap * i - 2.5,
          -17,
          1
        );
        if (i > 0) {
          var geometry = new THREE.Geometry();
          geometry.vertices.push(
            new THREE.Vector3(curVertice.x - gap, curVertice.y, curVertice.z)
          );
          geometry.vertices.push(curVertice);
          var line = new THREE.Line(geometry, lineMaterial);
          this.scene.add(line);
        }

        // 绘制竖线
        var geometry2 = new THREE.Geometry();
        geometry2.vertices.push(
          new THREE.Vector3(
            sprite.position.x - 1.4,
            sprite.position.y + 2.4,
            sprite.position.z
          )
        );
        geometry2.vertices.push(curVertice);
        var line2 = new THREE.Line(geometry2, lineMaterial);
        this.scene.add(line2);

        // 绘制连接点
        var geometry3 = new THREE.CircleGeometry(0.3, 32);
        var material3 = new THREE.MeshBasicMaterial({ color: 0x3cb371 });
        var circle = new THREE.Mesh(geometry3, material3);
        circle.position.set(curVertice.x, curVertice.y, curVertice.z);
        this.scene.add(circle);

        if (i === 0) {
          bottomFirstPoint = circle.position;
        }
      }

      // 绘制Top 、 Bottom 到二级机构连线
      var secondLevelDeptTop = new THREE.Vector3(-22, 6.2, 1);
      if (topFirstPoint) {
        var geometry = new THREE.Geometry();
        geometry.vertices.push(
          new THREE.Vector3(topFirstPoint.x, topFirstPoint.y, topFirstPoint.z)
        );
        geometry.vertices.push(secondLevelDeptTop);
        var line = new THREE.Line(geometry, lineMaterial);
        this.scene.add(line);
      }
      var secondLevelDeptBottom = new THREE.Vector3(-17, -2.2, 1);
      if (topFirstPoint) {
        var geometry = new THREE.Geometry();
        geometry.vertices.push(
          new THREE.Vector3(
            bottomFirstPoint.x,
            bottomFirstPoint.y,
            bottomFirstPoint.z
          )
        );
        geometry.vertices.push(secondLevelDeptBottom);
        var line = new THREE.Line(geometry, lineMaterial);
        this.scene.add(line);
      }

      // 绘制二级部门与数据中心连线
      var secondLevelDeptRight = new THREE.Vector3(-14.2, 2, 1);
      var dataCenterLeft = new THREE.Vector3(-5, 2, 1);
      var geometry = new THREE.Geometry();
      geometry.vertices.push(secondLevelDeptRight);
      geometry.vertices.push(dataCenterLeft);
      var line = new THREE.Line(geometry, lineMaterial);
      this.scene.add(line);

      // 绘制箭头
      var arrowMap = new THREE.TextureLoader().load(
        "../../../static/image/trans/arrow3.png"
      );
      var arrowMaterial = new THREE.SpriteMaterial({
        map: arrowMap,
        fog: true,
      });
      this.arrowSprite = new THREE.Sprite(arrowMaterial);
      /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
      this.arrowSprite.position.set(
        secondLevelDeptRight.x,
        secondLevelDeptRight.y,
        secondLevelDeptRight.z
      );
      this.arrowSprite.scale.set(3, 1.5, 1);
      this.scene.add(this.arrowSprite);

      // 绘制二级部门与数据中心连线的点
      this.addImgConnectPoint(secondLevelDeptRight);
      this.addImgConnectPoint(dataCenterLeft);

      // 添加动画
      const coords = { x: secondLevelDeptRight.x, y: secondLevelDeptRight.y };
      const tween = new TWEEN.Tween(coords)
        .to({ x: dataCenterLeft.x, y: dataCenterLeft.y }, 3000)
        .easing(TWEEN.Easing.Linear.None)
        .onUpdate(() => {
          this.arrowSprite.position.x = coords.x;
          this.arrowSprite.position.y = coords.y;
        })
        .start();
      tween.repeat(Infinity); // repeats forever
    },
    addImgConnectPoint(point) {
      var spriteMap = new THREE.TextureLoader().load(
        "../../../static/image/trans/point.png"
      );
      var spriteMaterial = new THREE.SpriteMaterial({
        map: spriteMap,
        fog: true,
      });
      var sprite = new THREE.Sprite(spriteMaterial);
      /*4、放大图片，每个精灵有自己的大小，默认情况下都是很小的，如果你不放大，基本是看不到的*/
      sprite.position.set(point.x - 0.4, point.y, point.z);
      sprite.scale.set(1, 1, 1);
      this.scene.add(sprite);
    },
    //传感器详情界面
    alarmDetail() {
      this.$router.push("alarmPage");
      console.log("跳转到传感器详情界面");
    },
    onMouseDown(event) {
      event.preventDefault();
      this.userMouse.x = event.clientX;
      this.userMouse.y = event.clientY;
      // normalize between -1 and +1
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    },
    raycastSprites() {
      this.raycaster.setFromCamera(this.mouse, this.camera);
      var intersects = this.raycaster.intersectObjects(this.spriteMoreGroup);
      if (intersects.length > 0) {
        var selectedName = intersects[0].object.name;
        var selectIndex = Number(selectedName.replace("more_", ""));
        var nodeData = this.transData[selectIndex];
        var childNode = nodeData.chindNode;
        this.dialogTitle = nodeData.nodeName;
        this.dialogItemCount = childNode.length;
        this.depts = childNode;
        console.info(intersects[0].object.name);
        this.mouse.x = 0;
        this.mouse.y = 0;
        this.show();
      } else {
      }
    },
    show() {
      this.$modal.show("hello-world");
    },
    hide() {
      this.$modal.hide("hello-world");
    },
  },
};
</script>

<style scoped>
.root {
  position: relative;
}
#uiContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.sysTitle {
  width: 100%;
  height: 112px;
  background-image: url(../../../static/image/transImg/titleBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  color: white;
  font-family: "Microsoft YaHei";
  font-weight: 600;
  font-size: 24px;
  padding-top: 5px;
  letter-spacing: 8px;
}
.dialogBg {
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: url(../../../static/image/transImg/dialog_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 20px;
  position: relative;
}
.dialogTitle {
  width: 85%;
  height: 55px;
  margin: 0px auto;
  background-image: url(../../../static/image/transImg/dialog_head_bg.png);
  background-size: 100% 100%;
}
.dialogTitleText {
  font-family: MicrosoftYaHei-Bold;
  font-size: 22px;
  color: #fafafa;
  font-weight: bold;
}
.dialogSubTitleText {
  font-family: MicrosoftYaHei;
  font-size: 15px;
  color: #00d8ff;
}
.colseDiv {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-image: url(../../../static/image/transImg/close.png);
  background-size: 100% 100%;
}
/* .dialogItemContainer{
  width: auto;
  height: 80%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-content: flex-start;
  text-align: center;
  margin: 10px 80px;
  padding-top: 20px;
  overflow-y: scroll;
  text-align: center;
} */
.dialogItemContainer {
  width: auto;
  height: 80%;
  text-align: center;
  margin: 10px 80px;
  padding-top: 20px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 120px 120px 120px 120px 120px 120px 120px;
  grid-template-rows: 120px 120px 120px 120px 120px 120px 120px;
}
.dialogItemContainer > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(5) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.dialogItemContainer > *:nth-child(6) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(7) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(8) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(9) {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(10) {
  -ms-grid-row: 2;
  -ms-grid-column: 5;
}
.dialogItemContainer > *:nth-child(11) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(12) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(13) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(14) {
  -ms-grid-row: 3;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(15) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.dialogItemContainer > *:nth-child(16) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(17) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(18) {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(19) {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(20) {
  -ms-grid-row: 4;
  -ms-grid-column: 5;
}
.dialogItemContainer > *:nth-child(21) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(22) {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(23) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(24) {
  -ms-grid-row: 5;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(25) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
.dialogItemContainer > *:nth-child(26) {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(27) {
  -ms-grid-row: 6;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(28) {
  -ms-grid-row: 6;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(29) {
  -ms-grid-row: 6;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(30) {
  -ms-grid-row: 6;
  -ms-grid-column: 5;
}
.dialogItemContainer > *:nth-child(31) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
.dialogItemContainer > *:nth-child(32) {
  -ms-grid-row: 7;
  -ms-grid-column: 2;
}
.dialogItemContainer > *:nth-child(33) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
.dialogItemContainer > *:nth-child(34) {
  -ms-grid-row: 7;
  -ms-grid-column: 4;
}
.dialogItemContainer > *:nth-child(35) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}
.dialogItem {
  width: auto;
  height: 108px;
  margin: 10px;
  background-image: url(../../../static/image/transImg/data_item_bg.png);
  background-size: 100% 100%;
}
.dialogItemContainer::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.itemCount {
  color: #00e4ff;
  font-size: 18px;
  margin-top: 14px;
}
.itemSize {
  margin-top: 5px;
  color: #00e4ff;
  font-size: 18px;
}
.itemName {
  margin-top: 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}
.v--modal-overlay {
  background: rgba(3, 3, 3, 0.7);
}
</style>
